<template>
  <div class="page-container">
    <div class="in-container">
      <AppSearchForm @submit="getList" @reset="reset">
        <el-form-item>
          <el-input
            v-model="state.query.KeyWords"
            clearable
            placeholder="输入代码、中文名称"
            style="width: 300px"
          />
        </el-form-item>
      </AppSearchForm>
      <div class="btn-area">
        <el-button @click="openDialog" type="primary"> 新增 </el-button>
        <el-button @click="exportFile" type="primary"> EXCEL导出 </el-button>
        <el-button @click="deleteSelectData" type="danger"> 删除 </el-button>
      </div>
      <AppPageTable
        stripe
        :data="state.tableData.data"
        @change="getList()"
        :autostyle="'height: calc(100% - 80px);'"
        :option="state.tableData.option"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          width="55"
          fixed="left"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="countryCode"
          width="100"
          label="代码"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="countryCh"
          width="120"
          label="中文名称"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="countryEn"
          width="250"
          label="英文名称"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="hsCode"
          width="100"
          label="海关代码"
        />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button @click.stop="update(scope.row)" type="primary"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定删除本条数据吗？"
              @confirm="deleteData(scope.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </AppPageTable>
      <el-dialog
        :title="state.dialogData.title"
        v-model="state.dialogData.show"
        width="500px"
      >
        <el-form
          :model="state.formData"
          :rules="state.formRules"
          label-width="80px"
          ref="form"
        >
          <el-form-item prop="countryCode" label="代码">
            <el-input v-model="state.formData.countryCode"></el-input>
          </el-form-item>
          <el-form-item prop="countryCh" label="中文名称">
            <el-input v-model="state.formData.countryCh"></el-input>
          </el-form-item>
          <el-form-item prop="countryEn" label="英文名称">
            <el-input v-model="state.formData.countryEn"></el-input>
          </el-form-item>
          <el-form-item prop="hsCode" label="海关代码">
            <el-input v-model="state.formData.hsCode"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel" link>取消</el-button>
            <el-button type="primary" @click="submit"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed, reactive, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/public/request";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import AppTitleBox from "@/components/AppTitleBox.vue";
import { fileDownload } from "@/public/publicUtils";


const state = reactive({
  query: {
    KeyWords: "",
  },
  tableData: {
    data: [],
    option: useTableOption(),
  },
  dialogData: {
    show: false,
    title: "",
    btnLoading: false,
  },
  formData: {
    countryCode: "",
    countryCh: "",
    countryEn: "",
    hsCode: "",
  },
  formRules: {
    countryCode: [{ required: true, message: "请输入代码", trigger: "blur" }],
    countryCh: [{ required: true, message: "请输入中文名称", trigger: "blur" }],
    countryEn: [{ required: true, message: "请输入英文名称", trigger: "blur" }],
  },
});

const getList = () => {
  state.tableData.option.loading = true;
  request
    .get("/api/cscountry/querypage", {
      PageIndex: state.tableData.option.page,
      PageSize: state.tableData.option.pageSize,
      KeyWords: state.query.KeyWords,
    })
    .then((res) => {
      state.tableData.data = res.content;
      state.tableData.option.total = res.totalElements;
    })
    .finally(() => {
      state.tableData.option.loading = false;
    });
};

const reset = () => {
  state.tableData.option.page = 1;
  state.tableData.option.pageSize = 15;
  state.query.KeyWords = "";

  getList();
};

const update = (data) => {
  state.formData = JSON.parse(JSON.stringify(data));
  state.dialogData.title = "编辑国家";
  state.dialogData.show = true;
};
const deleteData = (data) => {
  request
    .post("/api/cscountry/delete", {
      idArray: [data.id],
    })
    .then((res) => {
      if (res.status) {
        ElMessage.success(res.message);
        getList();
      } else {
        ElMessage.error(res.message);
      }
    });
};
const form = ref();
const submit = async () => {
  state.dialogData.btnLoading = true;
  let url = "";
  if (state.formData.id) {
    url = "/api/cscountry/update";
  } else {
    url = "/api/cscountry/create";
  }
  await form.value.validate();
  request.post(url, state.formData).then((res) => {
    if (res.status) {
      ElMessage.success(res.message);
      getList();
      state.dialogData.show = false;
    } else {
      ElMessage.error(res.message);
    }
    state.dialogData.btnLoading = false;
  });
};
const cancel = () => {
  state.dialogData.show = false;
};
const openDialog = () => {
  state.dialogData.title = "新增国家";
  state.dialogData.show = true;
};
const exportFile = () => {
  fileDownload("/api/base/nation/download", state.query, "国家地区")
    .then(() => {})
    .catch((err) => {
      ElMessage.warning("文件导出失败");
    });
};
/**
 * 多项删除业务
 */
const deleteSelectData = () => {
  let deleteSelectArray = [];
  state.tableData.option.selected.forEach((t) => deleteSelectArray.push(t.id));
  ElMessageBox.confirm("确定删除所选国家信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      request
        .post("/api/cscountry/delete", {
          idArray: deleteSelectArray,
        })
        .then((res) => {
          if (res.status) {
            ElMessage.success(res.message);
            getList();
          } else {
            ElMessage.error(res.message);
          }
        });
    })
    .catch(() => {
      ElMessage.info("取消删除");
    });
};

watch(() => state.dialogData.show, (newVal) => {
  if (!newVal) {
    state.formData = {
      nationCode: "",
      nationName: "",
      nationEnName: "",
      customCode: "",
    };
    nextTick(() => {
      form.value.clearValidate();
    });
  }
});

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.btn-area {
  margin-bottom: 8px;
}
</style>
